<template>
  <div>
    <el-table ref="streamForm" :data="media.videoSwitchInfo.chs"  style="width: 100%"  @row-click='handleCurrentChanges' highlight-current-row>
      <el-table-column
        :label="$t('message.medias.chIndex')"
        prop="index">
      </el-table-column>
      <el-table-column
        :label="$t('message.type')"
        prop="srcType">
      </el-table-column>
      <el-table-column
        :label="$t('message.medias.srcID')"
        prop="srcID">
      </el-table-column>
    </el-table>
    <setForm id="1" v-show="show">       
       <template slot="boxTop">{{$t('message.medias.streamswitch')}}</template>
          <template slot="boxMain">      
            <el-row class="row-height" >
              <el-col :span="2">
                <span>{{ $t('message.medias.local') }}</span>
              </el-col>
              <el-col :span="2" v-for="(item, index) in currentRow.locals" :key="index">
                <el-checkbox :label="index + ''" :disabled="currentRow.index != index" v-model="item.checked" @change="onSelectChange('local', index, $event)"></el-checkbox>
              </el-col>
            </el-row>     
            <el-row class="row-height" >
              <el-col :span="2">
                <span>{{ $t('message.medias.remote') }}</span>
              </el-col>
              <el-col :span="2" v-for="(item, index) in currentRow.remotes" :key="index">
                <el-checkbox :label="index + ''" :disabled="currentRow.index != index" v-model="item.checked" @change="onSelectChange('remote', index, $event)"></el-checkbox>
              </el-col>
            </el-row>           
            <el-button  class="btnsave" v-if="true" @click="onSaveStreamSwitch">{{$t('message.save')}}</el-button>
          </template>
    </setForm>
    <setForm id="2">       
      <template slot="boxTop">{{$t('message.medias.mode')}}</template>
      <template slot="boxMain">                
        <el-row>
          <el-col :span="4" class="col4">  
            <div class="span3">            
              <label>{{$t('message.medias.mode')}}</label>   
            </div>
            <div class="span3">            
              <label>{{$t('message.medias.jitterTime')}}</label>   
            </div>                        
          </el-col>
          <el-col :span="20" class="col20a1">
            <div class="span17">
              <el-select v-model="cfg.mode" placeholder="">
                <el-option v-for="option in modes" :key="option.value" :label="option.name" :value="option.value"></el-option>
              </el-select>
            </div>
            <div class="span17">
              <el-input v-model.number="cfg.jitterTime" placeholder=""></el-input>
            </div>
          </el-col>
        </el-row>
        <el-button  class="btnsave" @click="onSave">{{$t('message.save')}}</el-button>
      </template>
    </setForm>
   
  </div>
</template>

<script>
import { api } from "../../../../libs/api";
import setForm from "@/components/setForm";
import mylist from "@/components/MyList";
import ebus from "../../../../libs/ebus";
import { mapState } from "vuex";
import topTable from "../../../../components/topTable";
export default {
  created () {
    ebus.emit('getStreamSwitchInfo', this)
    this.getCfg();
  },
  computed: {
    ...mapState(["media","system"])
  },
  data() {
    return {
      // labels: ['id', 'name', 'remote', 'local', 'audio', 'vedio'],
      show: false,
      testData: {
        cnt: 6,
        chs: [
          {
            index: 0,
            srcAddr: ['local:0']
          },
          {
            index: 1,
            srcAddr: ['local:1']
          },
          {
            index: 2,
            srcAddr: ['local:2']
          },
          {
            index: 3,
            srcAddr: ['remote:3']
          },
          {
            index: 4,
            srcAddr: ['remote:4']
          },
          {
            index: 5,
            srcAddr: ['remote:5']
          },
        ]
      },
      labels: ['id', 'name', 'remote', 'local'],
      switchs: [
        {
          outputCh: 0,
          name: 'Ch1',
          srcList: [
            {
              srcAddr: 'remote:0',
              playAudio: true,
              playVideo: true,
            }
          ]
        },
        {
          outputCh: 1,
          name: 'Ch2',
          srcList: [
            {
              srcAddr: 'remote:1',
              playAudio: true,
              playVideo: true,
            }
          ]
        },
        {
          outputCh: 2,
          name: 'Ch3',
          srcList: [
            {
              srcAddr: 'remote:2',
              playAudio: true,
              playVideo: true,
            }
          ]
        },
        {
          outputCh: 3,
          name: 'Ch4',
          srcList: [
            {
              srcAddr: 'local:3',
              playAudio: true,
              playVideo: true,
            }
          ]
        },
        {
          outputCh: 4,
          name: 'Ch5',
          srcList: [
            {
              srcAddr: 'local:4',
              playAudio: true,
              playVideo: true,
            }
          ]
        },
        {
          outputCh: 5,
          name: 'Ch6',
          srcList: [
            {
              srcAddr: 'local:5',
              playAudio: true,
              playVideo: true,
            }
          ]
        },
      ],
      modes: [{
        name: this.$t('message.medias.manual'),
        value: 'manual'
      }, {
        name: this.$t('message.medias.automatic'),
        value: 'automatic'
      }],
      cfg: {
        mode: 'automatic',
        jitterTime: 0
      },
      currentRow: {
        index: 0,
        locals: [
          {
          checked: false
          },
          {
          checked: false
          },
          {
          checked: false
          },
          {
          checked: false
          },
          {
          checked: false
          },
          {
          checked: false
          }
        ],
        remotes: [
          {
          checked: false
          },
          {
          checked: false
          },
          {
          checked: false
          },
          {
          checked: false
          },
          {
          checked: false
          },
          {
          checked: false
          }
        ],
      },
    }
  },
  components: {
    setForm,
    mylist,
    topTable
  },
  methods: {
    hasRemote (item) {
      return item.srcList.some(src => {
        return src.srcAddr === `remote:${item.outputCh}` ;
      })
    },
    hasLocal (item) {
      return item.srcList.some(src => {
        return src.srcAddr === `local:${item.outputCh}` ;
      })
    },
    getCfg () {
      api.onRequest(
        `$method.$get.${this.system.curTopic}.videoSwitch.cfg`,
        null,
        null,
        null,
        function(message, reqReply) {
          var res = JSON.parse(message)
          if (res.code == 0) {  
            this.cfg.mode = res.data.mode;
            this.cfg.jitterTime = res.data.jitterTime;
          } else {
            this.showCodeMsg(res.code, this, res.msg);
          }     
        }.bind(this)
      );
    },
    onSave () {
      var option = {
        mode: this.cfg.mode,
        jitterTime: this.cfg.jitterTime        
      };
      api.onRequest(
        `$method.$set.${this.system.curTopic}.videoSwitch.cfg`,
        JSON.stringify(option),
        null,
        null,
        function(message, reqReply) {
          var res = JSON.parse(message)
          if (res.code == 0) {  
            this.notification("Success", "");
            // let curIndex = this.currentRow.index ? this.currentRow.index : 0;
            this.handleCurrentChanges(this.media.videoSwitchInfo.chs[this.currentRow.index],this.currentRow.index );
            this.$refs.streamForm.setCurrentRow(this.media.videoSwitchInfo.chs[this.currentRow.index]);
          } else {
            this.showCodeMsg(res.code, this, res.msg);
          }          
          this.getCfg();  
        }.bind(this)
      );
    },
    handleCurrentChanges(val, index) {     
      this.init();   
      for (var key in val) {
        this.currentRow[key] = val[key];
      }
      var currentRow  = this.currentRow;
      if (typeof val.srcID === 'number') {
        if (val.srcType === 'local') {
          currentRow.locals[val.srcID].checked = true;
        }
        if (val.srcType === 'remote') {
          currentRow.remotes[val.srcID].checked = true;
        }
      }
      if (this.cfg.mode === 'manual') {
        this.show = true;
      } else {
        this.show = false;
      }
      
    },
    init () {
      this.currentRow = {
        index: 0,
        locals: [
          {
          checked: false
          },
          {
          checked: false
          },
          {
          checked: false
          },
          {
          checked: false
          },
          {
          checked: false
          },
          {
          checked: false
          }
        ],
        remotes: [
          {
          checked: false
          },
          {
          checked: false
          },
          {
          checked: false
          },
          {
          checked: false
          },
          {
          checked: false
          },
          {
          checked: false
          }
        ],
      }
    },
    onSaveStreamSwitch () {
      var srcID = 0;
      var isLocal = false;
      var isRemote = false;
      _.forEach(this.currentRow.locals, (item, index) => {
        if (item.checked) {
          srcID = index;
          isLocal = true;
        }
      })
      _.forEach(this.currentRow.remotes, (item, index) => {
        if (item.checked) {
          srcID = index;
          isRemote = true;
        }
      })
      if (!isLocal && !isRemote) {
        this.notification("error", this.$t('message.kvms.null'));
        return;
      }
      var option = {
        srcID: srcID,
        srcType: isLocal ? 'local' : 'remote'
      };
      api.onRequest(
        `$method.$set.${this.system.curTopic}.videoSwitch.ch.${this.currentRow.index}.cfg`,
        JSON.stringify(option),
        null,
        null,
        function(message, reqReply) {
          var res = JSON.parse(message)
          if (res.code == 0) {  
            this.notification("Success", "");
            ebus.emit('getStreamSwitchInfo', this);
            this.getCfg();
          } else {
            this.showCodeMsg(res.code, this, res.msg);
          }          
          this.getCfg();  
        }.bind(this)
      );
    },
    onSelectChange (type, index, enable) {
      if (enable) {
        if (type === 'local') {
          this.currentRow.remotes[index].checked = false;
        }
        if (type === 'remote') {
          this.currentRow.locals[index].checked = false;
        }
      }
    }
  }
};
</script>

<style scoped>
.row-height {
  height: 36px;
}
</style>

